<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约拍平台 - 我的订单</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .order-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .tab-active {
            color: #3b82f6;
            border-bottom: 2px solid #3b82f6;
        }
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 状态栏和导航栏将通过JS加载 -->
    
    <div class="pt-7 pb-20">
        <!-- 顶部标题栏 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between sticky top-0 z-10 shadow-sm">
            <a href="profile.html" class="text-gray-800">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-lg font-bold">我的订单</h1>
            <div class="w-5"></div>
        </div>
        
        <!-- 标签页 -->
        <div class="bg-white border-b border-gray-200">
            <div class="flex">
                <div class="flex-1 py-3 text-center tab-active">全部</div>
                <div class="flex-1 py-3 text-center text-gray-500">待付款</div>
                <div class="flex-1 py-3 text-center text-gray-500">待拍摄</div>
                <div class="flex-1 py-3 text-center text-gray-500">待交付</div>
                <div class="flex-1 py-3 text-center text-gray-500">已完成</div>
            </div>
        </div>
        
        <!-- 订单列表 -->
        <div class="p-3">
            <!-- 订单1 - 待拍摄 -->
            <div class="order-card">
                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar mr-2">
                        <div>
                            <div class="font-bold">张摄影</div>
                            <div class="text-xs text-gray-500">人像摄影师</div>
                        </div>
                    </div>
                    <div class="text-blue-500">待拍摄</div>
                </div>
                
                <div class="flex p-3">
                    <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-24 h-24 object-cover rounded-lg mr-3">
                    <div class="flex-1">
                        <div class="font-bold">日系小清新写真</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄时间：2023-06-15 09:00</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄地点：上海市静安区某某路123号</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-bold">¥399</div>
                            <div class="text-xs text-gray-500">2023-06-10 支付</div>
                        </div>
                    </div>
                </div>
                
                <div class="p-3 border-t border-gray-100 flex justify-end space-x-2">
                    <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-700">联系摄影师</button>
                    <button class="px-4 py-1.5 bg-blue-500 text-white rounded-full text-sm">查看详情</button>
                </div>
            </div>
            
            <!-- 订单2 - 待付款 -->
            <div class="order-card">
                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar mr-2">
                        <div>
                            <div class="font-bold">李写真</div>
                            <div class="text-xs text-gray-500">日系风格摄影师</div>
                        </div>
                    </div>
                    <div class="text-red-500">待付款</div>
                </div>
                
                <div class="flex p-3">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" class="w-24 h-24 object-cover rounded-lg mr-3">
                    <div class="flex-1">
                        <div class="font-bold">复古港风人像</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄时间：待确认</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄地点：待确认</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-bold">¥599</div>
                            <div class="text-xs text-gray-500">2023-06-12 预约</div>
                        </div>
                    </div>
                </div>
                
                <div class="p-3 border-t border-gray-100 flex justify-end space-x-2">
                    <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-700">取消订单</button>
                    <button class="px-4 py-1.5 bg-red-500 text-white rounded-full text-sm">立即支付</button>
                </div>
            </div>
            
            <!-- 订单3 - 待交付 -->
            <div class="order-card">
                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="avatar mr-2">
                        <div>
                            <div class="font-bold">王大师</div>
                            <div class="text-xs text-gray-500">婚纱摄影师</div>
                        </div>
                    </div>
                    <div class="text-yellow-500">待交付</div>
                </div>
                
                <div class="flex p-3">
                    <img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-24 h-24 object-cover rounded-lg mr-3">
                    <div class="flex-1">
                        <div class="font-bold">街头时尚风格</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄时间：2023-06-08 14:00</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄地点：上海市徐汇区某某路456号</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-bold">¥499</div>
                            <div class="text-xs text-gray-500">2023-06-05 支付</div>
                        </div>
                    </div>
                </div>
                
                <div class="p-3 border-t border-gray-100 flex justify-end space-x-2">
                    <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-700">联系摄影师</button>
                    <button class="px-4 py-1.5 bg-blue-500 text-white rounded-full text-sm">催促交付</button>
                </div>
            </div>
            
            <!-- 订单4 - 已完成 -->
            <div class="order-card">
                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                    <div class="flex items-center">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="avatar mr-2">
                        <div>
                            <div class="font-bold">陈影像</div>
                            <div class="text-xs text-gray-500">时尚街拍摄影师</div>
                        </div>
                    </div>
                    <div class="text-gray-500">已完成</div>
                </div>
                
                <div class="flex p-3">
                    <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" class="w-24 h-24 object-cover rounded-lg mr-3">
                    <div class="flex-1">
                        <div class="font-bold">夏日海边写真</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄时间：2023-05-20 10:00</div>
                        <div class="text-xs text-gray-500 mt-1">拍摄地点：上海市浦东新区某某海滩</div>
                        <div class="flex justify-between items-center mt-2">
                            <div class="text-red-500 font-bold">¥699</div>
                            <div class="text-xs text-gray-500">2023-05-25 完成</div>
                        </div>
                    </div>
                </div>
                
                <div class="p-3 border-t border-gray-100 flex justify-end space-x-2">
                    <button class="px-4 py-1.5 border border-gray-300 rounded-full text-sm text-gray-700">查看照片</button>
                    <button class="px-4 py-1.5 bg-blue-500 text-white rounded-full text-sm">评价订单</button>
                </div>
            </div>
        </div>
        
        <!-- 空状态 (当没有订单时显示) -->
        <div class="hidden flex flex-col items-center justify-center p-10">
            <img src="https://cdn-icons-png.flaticon.com/512/4076/4076432.png" class="w-24 h-24 opacity-30 mb-4">
            <div class="text-gray-500">暂无订单</div>
            <button class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-full text-sm">去探索约拍</button>
        </div>
    </div>
    
    <script>
        // 加载组件
        document.addEventListener('DOMContentLoaded', function() {
            // 创建iOS状态栏
            const statusBar = document.createElement('div');
            statusBar.className = 'bg-black text-white h-7 flex items-center justify-between px-4 text-xs fixed top-0 left-0 right-0 z-50';
            statusBar.innerHTML = `
                <div>
                    <span>9:41</span>
                </div>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            `;
            document.body.prepend(statusBar);
            
            // 创建底部导航栏
            const bottomNav = document.createElement('div');
            bottomNav.className = 'fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 h-16 flex justify-around items-center px-2 z-10';
            bottomNav.innerHTML = `
                <a href="home.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="explore.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-compass text-xl"></i>
                    <span class="text-xs mt-1">发现</span>
                </a>
                <a href="publish.html" class="flex flex-col items-center">
                    <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center">
                        <i class="fas fa-plus text-xl"></i>
                    </div>
                </a>
                <a href="messages.html" class="flex flex-col items-center text-gray-500">
                    <i class="fas fa-comment text-xl"></i>
                    <span class="text-xs mt-1">消息</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            `;
            document.body.appendChild(bottomNav);
            
            // 标签切换
            const tabs = document.querySelectorAll('.flex-1.py-3.text-center');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => {
                        t.classList.remove('tab-active');
                        t.classList.add('text-gray-500');
                    });
                    this.classList.add('tab-active');
                    this.classList.remove('text-gray-500');
                });
            });
        });
    </script>
</body>
</html> 